<template>
  <div ref="scrollContainer" class="scroll-container" @mouseover="stopScroll($event)" @mouseleave="resumeScroll($event)">
    <ul ref="itemList" class="item-list"
        :style="{
            animationPlayState: animationPaused ? 'paused' : 'running'
          }"
    >
      <li v-for="(item, index) in displayList" :key="index" @click="handleClick(item, index)">
        <slot name="item" :item="item" :index="index >= dataList.length ? (index - dataList.length) : index">

        </slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    // 数据源（必填）
    dataList: {
      type: Array,
      required: true,
      default: () => []
    },
    // 滚动容器尺寸
    containerWidth: {
      type: [String, Number],
      default: '100%'
    },
    containerHeight: {
      type: [String, Number],
      default: '100%'
    },
    // 滚动速度（数字越大滚动越慢）
    scrollDuration: {
      type: Number,
      default: 6
    },
  },
  computed: {
    displayList() {
      console.log(this.dataList)
      return this.shouldScroll ? [...this.dataList, ...this.dataList] : this.dataList
    }
  },
  watch: {
    dataList: {
      handler() {
        this.$nextTick(() => {
          const contentHeight = this.$refs.itemList?.scrollHeight || 0
          const containerHeight = this.$refs.scrollContainer?.clientHeight || 0
          this.shouldScroll = contentHeight > containerHeight
          this.animationPaused = !this.shouldScroll
          console.log(contentHeight, containerHeight, this.animationPaused, this.shouldScroll)
        })
      },
      deep: true,
      immediate: true
    },
    scrollDuration: {
      handler(newVal) {
        this.setAnimationDuration(newVal);
      },
      immediate: true
    }
  },
  data() {
    return {
      animationPaused: true,
      shouldScroll: false
    }
  },
  mounted() {
    this.checkScrollNeeded()
  },
  methods: {
    setAnimationDuration(duration) {
      const listElement = this.$refs.itemList;
      if (!listElement) return;
      console.log(duration)
      listElement.style.animation = `scroll ${duration}s linear infinite`;
      listElement.style.webkitAnimation = `scroll ${duration}s linear infinite`;
    },
    checkScrollNeeded() {
      const container = this.$refs.scrollContainer
      const content = this.$refs.itemList
      this.shouldScroll = content.scrollHeight > container.clientHeight
      this.animationPaused = !this.shouldScroll
    },
    handleClick(item, index) {
      let i = index
      if (index >= this.dataList.length) {
        i = index - this.dataList.length
      }
      this.$emit('itemClick', item, i)
    },
    stopScroll(e) {
      this.$nextTick(() => {
        this.animationPaused = true;
      })
    },
    resumeScroll(e) {
      this.$nextTick(() => {
        this.animationPaused = false;
      })
    },
  }
}

</script>

<style scoped>
.scroll-container {
  overflow: hidden;
  position: relative;
  width: v-bind('containerWidth');
  height: v-bind('containerHeight');
  border: 1px solid red;
}

.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  animation: scroll 6s linear infinite;
  transform: translate3d(0, 0, 0);  /* 使用3D转换避免闪动 */
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.item-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  color: #FFB300;
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
  position: relative; /* 确保每个 li 元素都在正确位置 */
  z-index: 100;  /* 确保每个 li 元素在最上层，避免被其他内容遮挡 */
}

@keyframes scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -50%, 0);  /* 使用 3D 转换，避免闪动 */
  }
}
</style>